<template>
    <el-scrollbar>
        <div class="tool-page">
            <div class="tool-top-box">
                <div class="tool-item-box" :class="[currentTool.value == item.value && 'active']"
                    v-for="(item, index) in toolsList" :key="index" :style="{ background: item.bglinear }"
                    @click="changeTool(item)">
                    <div class="tool-info">
                        <div class="tool-name">{{ $t(item.label) }}</div>
                        <div class="tool-desc">{{ $t(item.desc) }}</div>
                    </div>
                    <img :src="item.img" class="tool-img">
                </div>
            </div>
            <div class="check-tool-title">{{ $t(currentTool.label) }}</div>
            <div class="type-box">
                <template v-for="(item, index) in TypeList" :key="index">
                    <div class="type-item" v-if="item.type == currentTool.value"
                        :class="[typeChecked == item.value && 'active']" @click="changeType(item)">
                        {{ $t(item.name) }}
                    </div>
                </template>
            </div>
            <div class="tool-upload-file-boxs" :class="[currentTool.value == 'ocr' && step == 3 && 'ocr-finish-box']">
                <template v-if="step == '1' && ['ocr', 'document', 'merge'].indexOf(currentTool.value) != -1">
                    <el-upload class="drag-upload-box" drag action="/mgr/jvs-auth/upload/jvs-public"
                        :multiple="currentTool.value == 'merge'" :headers="uploadHeaders" :data="uploadData"
                        :show-file-list="false" :limit="5"
                        :accept="currentTool.value == 'document' ? '.docx,.pptx,.xlsx' : currentTool.value == 'ocr' ? '.jpeg,.png,.bmp,.jpg' : typeChecked == 'word' ? '.docx' : '.pdf'"
                        :before-upload="beforeUpload" :on-exceed="handleExceed" :on-progress="onProgress"
                        :on-success="uploadSuccess" :on-error="uploadError" :file-list="localhostFileList">
                        <div class="upload-content-box">
                            <img src="../../assets/images/tools/uploadImg.png" v-if="currentTool.value == 'document'">
                            <img src="../../assets/images/tools/uploadImg1.png" v-if="currentTool.value == 'ocr'">
                            <img src="../../assets/images/tools/mergePDF.png"
                                v-if="currentTool.value == 'merge' && typeChecked == 'word'">
                            <img src="../../assets/images/tools/mergeword.png"
                                v-if="currentTool.value == 'merge' && typeChecked == 'pdf'">
                            <div class="tips">{{ $t('message.text.clickToUploadOrDrag') }}</div>
                            <div class="buttons">
                                <el-button class="button" type="primary">{{ $t('message.text.uploadDocu') }}</el-button>
                                <div class="button know-button" @click.stop="openCloudFile">
                                    {{ $t('message.text.libraryDocu') }}</div>
                            </div>
                        </div>
                    </el-upload>
                </template>
                <template v-if="currentTool.value == 'merge' && step == 2">
                    <div class="first-title">{{ $t('message.text.docSetting') }}</div>
                    <div class="second-title">{{ $t('message.text.dragginAndAdjusting') }}</div>
                    <div class="upload-file-box">
                        <draggable v-model="localhostSuccessFile" class="draggable-box">
                            <template #item="{ element, index }">
                                <div class="draggable-item">
                                    <svg class="draggable-item-icon">
                                        <use
                                            v-bind:xlink:href="`#${typeChecked == 'word' ? 'keowledge-a-zu3558' : 'keowledge-a-zu3557'}`">
                                        </use>
                                    </svg>
                                    <div class="file-index">
                                        <span>{{ index + 1 }}</span>
                                        <i class="knowledge-iconfont keowledge-huishouzhan-weixuanzhong"
                                            @click="delFile(index)"></i>
                                    </div>
                                    <div class="file-name-box" v-tooltip-auto-show>
                                        <el-tooltip :content="element.name" effect="light">
                                            <div class="file-name">{{ element.name }}</div>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </template>
                        </draggable>
                        <div class="draggable-item" v-if="5 - localhostSuccessFile.length > 0" @click="uploadColudeFile">
                            <el-upload v-if="mergeFileType == 'local'" class="drag-upload-box"
                                action="/mgr/jvs-auth/upload/jvs-public" :multiple="currentTool.value == 'merge'"
                                :headers="uploadHeaders" :data="uploadData" :show-file-list="false"
                                :accept="typeChecked == 'word' ? '.docx' : '.pdf'" :limit="5 - localhostSuccessFile.length"
                                :before-upload="beforeUpload" :on-exceed="handleSuccessExceed" :on-progress="onProgress"
                                :on-success="uploadSuccessFile" :on-error="uploadError" :file-list="localhostFileList">
                                <div class="add-button">
                                    <i class="knowledge-iconfont keowledge-tianjia"></i>
                                </div>
                            </el-upload>
                            <div class="change-file-box" @click.stop="changeMergeType">
                                <svg class="change-file-icon">
                                    <use xlink:href="#keowledge-a-zu2561"></use>
                                </svg>
                            </div>
                            <div class="add-button">
                                <i class="knowledge-iconfont keowledge-tianjia" v-if="mergeFileType != 'local'"></i>
                            </div>
                            <div class="add-file-text">
                                {{ mergeFileType == 'local' ? $('message.text.uploadLocalDoc') : $t('message.text.uploadCloudDoc') }}
                            </div>
                        </div>
                    </div>
                    <div class="merge-actions">
                        <el-button class="button" type="primary"
                            @click="startMerge">{{ $t('message.text.mergeDocu') }}</el-button>
                        <el-button class="button" @click="handleCancal">{{ $t('message.button.cancal') }}</el-button>
                    </div>
                </template>
                <template v-if="step == 2 && currentTool.value == 'document'">
                    <div class="first-title">{{ $t('message.text.changeFileFormat') }}</div>
                    <div class="second-title">{{ $t('message.text.outputFileFormat') }}</div>
                    <div class="uploadFile-actions">
                        <div class="file-name-box" v-tooltip-auto-show>
                            <svg class="file-icon">
                                <use v-bind:xlink:href="getIcon('document_upload', getCurrentIcon())"></use>
                            </svg>
                            <el-tooltip :content="uploadFile.originalFileName" effect="light">
                                <div class="doc-name">
                                    {{ uploadFile.originalFileName }}
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="out-name">{{ $t('message.text.outPutFormat') }}</div>
                        <div class="out-type-box">
                            <el-select class="select" v-model="documentType">
                                <el-option v-for="(item, index) in getSwtichDropList(uploadFile.originalFileName)"
                                    :key="index" :label="item" :value="item"></el-option>
                            </el-select>
                        </div>
                        <el-button class="button" type="primary"
                            @click="startSwitch">{{ $t('message.buttons.convertNow') }}</el-button>
                        <el-button class="button" @click="handleCancal">{{ $t('message.buttons.cancal') }}</el-button>
                    </div>
                </template>
                <template v-if="step == '2.5' || step == '1.5'">
                    <div ref="loadingRef" class="loaidng-animiate" id="loaidng-animiate"></div>
                    <div class="loading-text" v-if="step == '2.5'">
                        {{ currentTool.value == 'document' ? $t('message.text.fileBeingConverted') : currentTool.value == 'merge' ? $t('message.text.fileBeingMerged') : $t('message.text.fileBeingRecognized') }}
                    </div>
                    <div class="loading-text" v-if="step == '1.5'">
                        {{ $t('message.text.fileUploading') }}
                    </div>
                </template>
                <template v-if="step == '3'">
                    <div class="trans-file-status-box" v-if="currentTool.value != 'ocr'">
                        <svg class="trans-status">
                            <use v-bind:xlink:href="`${toolState ? '#keowledge-zhengque' : '#keowledge-cuowu'}`"></use>
                        </svg>
                        <div class="status-text">
                            {{ currentTool.value == 'merge' ? $t('message.text.merge') : $t('message.text.converted') }}{{ toolState ? $t('message.finish') : $t('message.fail') }}
                        </div>
                        <div class="status-tips">{{ $t('message.text.saveOrDownload') }}</div>
                        <div class="trans-name-box" v-tooltip-auto-show>
                            <svg class="file-icon">
                                <use v-bind:xlink:href="getIcon('document_upload', transEndFile.suffix)"></use>
                            </svg>
                            <el-tooltip :content="`${transEndFile.fileName}.${transEndFile.suffix}`" effect="light">
                                <div class="doc-name">
                                    {{ transEndFile.fileName }}.{{ transEndFile.suffix }}
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="trans-actions-box">
                            <el-button class="button" type="primary" @click="saveFile"
                                :disabled="transEndFile.isSave">{{ $t('message.buttons.save') }}</el-button>
                            <div class="button other-button" @click="downLoadFile">{{ $t('message.buttons.download') }}
                            </div>
                            <div class="button other-button" @click="handleCancal">
                                {{ $t('message.buttons.convertOtherDoc') }}</div>
                        </div>
                    </div>
                    <div v-else class="ocr-cotent-box">
                        <div class="ocr-left" :style="{ width: `calc(100% - ${ocrLeftWidth}px)` }" ref="ocrImgBoxRef"
                            @mousedown="onmousedownHandle" @mouseleave="onMousedLeave">
                            <!-- style="max-width:fit-content;width:100%;height: fit-content;"  uploadFile.fileLink-->
                            <img ref="ocrImgRef" @load="initImage" :src="uploadFile.fileLink"
                                :style="{ left: imgPos.left + 'px', top: imgPos.top + 'px', width: imgW + 'px', height: imgH + 'px', transform: `scale(${imgScale})` }" />
                        </div>
                        <div class="ocr-drag-line">
                            <svg class="ocr-drag-button" @mousedown="leftResize($event)">
                                <use xlink:href="#keowledge-ladonganniu"></use>
                            </svg>
                        </div>
                        <div class="ocr-right" :style="{ width: `${ocrLeftWidth}px` }">
                            <div class="ocr-type-top">
                                <div class="type-item" :class="[ocrType == 'result' && 'item-active']"
                                    @click="changeOcrType('result')">{{ $t('message.text.identification') }}</div>
                                <div class="type-item" :class="[ocrType == 'json' && 'item-active']"
                                    @click="changeOcrType('json')">{{ $t('message.text.rawData') }}</div>
                            </div>
                            <div class="ocr-content-box">
                                <el-scrollbar v-if="ocrType == 'result'">
                                    <div class="result-box">
                                        <div v-for="(item, index) in ocrTextArr" :key="index" class="result-item">
                                            <div class="result-index">{{ index + 1 }}</div>
                                            <div class="result-value">
                                                <div class="no-div" v-if="!ocrIsedit">{{ item }}</div>
                                                <el-input v-if="ocrIsedit" v-model="ocrTextArr[index]"></el-input>
                                            </div>
                                        </div>
                                    </div>
                                </el-scrollbar>
                                <div v-if="ocrType == 'json'" id="monacoEditor" ref="monacoEditor"></div>
                            </div>
                            <div class="ocr-type-bottom">
                                <template v-if="!ocrIsedit">
                                    <el-tooltip :content="$t('message.buttons.reIdentification')" effect="light">
                                        <svg class="action-icon" @click="doAction('refresh')">
                                            <use xlink:href="#keowledge-a-zu6877"></use>
                                        </svg>
                                    </el-tooltip>
                                    <el-tooltip :content="$t('message.buttons.edit')" effect="light">
                                        <svg class="action-icon" @click="doAction('edit')">
                                            <use xlink:href="#keowledge-bianji1"></use>
                                        </svg>
                                    </el-tooltip>
                                    <el-tooltip :content="$t('message.buttons.copy')" effect="light">
                                        <svg class="action-icon" @click="doAction('copy')">
                                            <use xlink:href="#keowledge-fuzhi"></use>
                                        </svg>
                                    </el-tooltip>
                                    <el-tooltip :content="$t('message.buttons.save')" effect="light">
                                        <svg class="action-icon" @click="doAction('save')">
                                            <use xlink:href="#keowledge-baocun"></use>
                                        </svg>
                                    </el-tooltip>
                                    <el-tooltip :content="$t('message.buttons.download')" effect="light">
                                        <svg class="action-icon" @click="doAction('download')">
                                            <use xlink:href="#keowledge-xiazai2"></use>
                                        </svg>
                                    </el-tooltip>
                                    <el-tooltip :content="$t('message.buttons.close')" effect="light">
                                        <i class="keowledge-danchuangguanbi1 knowledge-iconfont"
                                            @click="handleCancal"></i>
                                    </el-tooltip>
                                </template>
                                <template v-if="ocrIsedit">
                                    <el-button type="primary"
                                        @click="doAction('saveEdit')">{{ $t('message.buttons.submit') }}</el-button>
                                    <el-button
                                        @click="doAction('cancalEdit')">{{ $t('message.buttons.cancal') }}</el-button>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
            <div class="file-upload-tips" v-if="['document', 'ocr'].indexOf(currentTool.value) != -1">
                <div class="title">{{ $t('message.text.fileUploadInstruction') }}：</div>
                <div class="file-tips-item" v-for="(item, index) in fileTips[currentTool.value]" :key="index">
                    <svg class="icon" v-if="item.icon">
                        <use v-bind:xlink:href="item.icon"></use>
                    </svg>
                    <div class="text" v-html="$t(item.text)"></div>
                </div>
            </div>
        </div>
    </el-scrollbar>
    <selectKnow ref="saveKnowRef" :title="selectTitle" @callBack="getCheckedFile" :selectKnowType="selectKnowType"
        :checkFileType="checkFileType"></selectKnow>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    computed,
    nextTick,
    getCurrentInstance,
    onBeforeUnmount
} from 'vue'

import { useRouter } from "vue-router"
import loading5Data from '@/views/mobile/loading5-color-data.json'
import lottie from 'lottie-web'
import selectKnow from '@/views/selectKnow/index.vue'
import { checkedKnow } from '@/types/common'
import { require } from '@/utils/require'
import { fileTransition, getFileNameUrl, ocrRecognition, filesMer, fileTransSave, ocrSaveContent } from '@/api/common'
import useUserInfoStore from '@/store/userInfo';
import draggable from 'vuedraggable'
import { copyText } from '@/utils/util'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import HTMLWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import * as monaco from 'monaco-editor'
import documentPng from '@/assets/images/tools/document.png'
import ocrPng from '@/assets/images/tools/ocr.png'
import mergePng from '@/assets/images/tools/merge.png'
import diffPng from '@/assets/images/tools/diff.png'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
self.MonacoEnvironment = {
    getWorker(_: string, label: string) {
        if (label === 'html')
            return new HTMLWorker()
        return new EditorWorker()
    },
}
const monacoEditor = ref()
const router = useRouter();
const { proxy } = getCurrentInstance()
const userStore = useUserInfoStore()
const mergeFileType = ref('local')
const currentTool = ref({
    label: 'message.text.coverDocument',
    desc: 'message.text.multPDFFileConvert',
    img: documentPng,
    message: '文件大小不能超过20M',
    value: "document",
    bglinear: 'linear-gradient(90deg, #EFF0FF 0%, #FFFFFF 100%)'
})
const toolsList = [{
    label: 'message.text.coverDocument',
    desc: 'message.text.multPDFFileConvert',
    checkType: ['docx', 'pdf', 'xlsx'],
    img: documentPng,
    value: "document",
    bglinear: 'linear-gradient(90deg, #EFF0FF 0%, #FFFFFF 100%)'
}, {
    label: 'message.text.ocrRecognition',
    desc: 'message.text.textInformationRecognition',
    img: ocrPng,
    value: "ocr",
    bglinear: 'linear-gradient(90deg, #FFF3ED 0%, #FFFFFF 100%)'
}, {
    label: 'message.text.documentMerg',
    desc: 'message.text.quickMergeOfPDFAndWord',
    img: mergePng,
    value: "merge",
    bglinear: 'linear-gradient(90deg, #EDFFFA 0%, #FFFFFF 100%)'
}, {
    label: 'message.text.documentComparison',
    desc: 'message.text.documentParsing',
    img: diffPng,
    noRelease: true,
    value: "diff",
    bglinear: 'linear-gradient(90deg, #E7F1FF 0%, #FFFFFF 100%)'
}]
const fileTips = {
    'document': [{
        icon: '',
        text: 'message.text.docTips'
    }, {
        icon: '#keowledge-a-zu3558',
        text: 'message.text.docTips1'
    }, {
        icon: '#keowledge-a-zu3556',
        text: 'message.text.docTips2'
    }, {
        icon: '#keowledge-a-zu3555',
        text: 'message.text.docTips3'
    }, {
        icon: '',
        text: 'message.text.docTips4'
    }],
    'ocr': [{
        icon: '',
        text: 'message.text.ocrTips'
    }, {
        icon: '',
        text: 'message.text.ocrTips1'
    }, {
        icon: '',
        text: 'message.text.ocrTips2'
    }]
}
const TypeList = [{
    name: 'message.text.imageRecognition',
    value: 'image',
    type: 'ocr',
    checkType: ['png', 'jpeg', 'jpg'],
    icon: '#icon-a-fenzu32'
}, {
    name: 'message.text.tableRecognition',
    value: 'excel',
    type: 'ocr',
    checkType: ['xlsx'],
    noRelease: true,
    icon: '#icon-Excel'
}, {
    name: 'message.text.wordMerge',
    value: 'word',
    type: 'merge',
    checkType: ['docx'],
    icon: '#icon-a-wenjianleixing-Word2'
}, {
    name: 'message.text.pdfMerge',
    value: 'pdf',
    type: 'merge',
    checkType: ['pdf'],
    icon: '#icon-a-wenjianleixing-Pdf1'
}]
const typeChecked = ref('image')
const uploadData = {
    module: '/jvs-knowledge/jvs-tool/'
}
const uploadHeaders = {
    Authorization: 'Bearer ' + userStore.access_token
}
const uploadLoading = ref(false)
const step = ref(1)
const localhostFileList = ref([])
const localhostSuccessFile = ref([])
const documentType = ref('')
const successFileNum = ref(0)
const uploadFile = ref({
    name: '',
    originalFileName: '',
    fileLink: ""
})
const ocrTextArr = ref([])
const ocrTextArrCopy = ref([])
const ocrText = ref('')
const ocrRaw = ref('')
const transEndFile = ref({})
const loadingRef = ref()
const saveKnowRef = ref()
const animation = ref(null)
const toolState = ref(false)
const ocrType = ref('result')
const ocrLeftWidth = ref(436)
const ocrIsedit = ref(false)
const selectKnowType = ref('folder')
const checkFileType = ref(['docx', 'pdf', 'xlsx'])
const selectTitle = ref($t('message.text.saveLocation'))
const ocrImgBoxRef = ref()
const ocrImgRef = ref()
const imgScale = ref(1)
const imgSize = ref(0)
const imgW = ref(0)
const imgH = ref(0)
const imgPos = ref({
    left: 0,
    top: 0,
})
function changeType(item) {
    if (item.noRelease) {
        proxy.$confirm($t('message.confirm.releasedYet'), $t('message.prompt'), {
            confirmButtonText: $t('message.buttons.submit'),
            showCancelButton: false,
            type: 'warning'
        }).then(() => {
        }).catch(() => {
        })
        return
    }
    if (typeChecked.value != item.value) {
        if (['word', 'pdf'].indexOf(typeChecked.value) != -1 && localhostSuccessFile.value.length > 0) {
            proxy.$confirm(`${$t('message.confirm.loseTheCurrent')}${currentTool.value.value == 'merge' ? $t('message.confirm.selectFiles') : currentTool.value.value == 'document' ? $t('message.confirm.convertFiles') : $t('message.confirm.recognitionContent')}${$t('message.confirm.isContinue')}`, $t('message.prompt'), {
                confirmButtonText: $t('message.buttons.submit'),
                cancelButtonText: $t('message.buttons.cancal'),
                type: 'warning',
            }).then(() => {
                typeChecked.value = item.value
                checkFileType.value = item.checkType
                handleCancal()
            });
        } else {
            typeChecked.value = item.value
            checkFileType.value = item.checkType
            handleCancal()
        }
    }
}
onBeforeUnmount(() => {
    if (ocrImgBoxRef.value) {
        const mousewheelevt = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll" : "mousewheel";
        ocrImgBoxRef.value.removeEventListener(mousewheelevt, handleWheel, { passive: true })
    }
})
function changeTool(item) {
    if (ocrImgBoxRef.value) {
        const mousewheelevt = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll" : "mousewheel";
        ocrImgBoxRef.value.addEventListener(mousewheelevt, handleWheel, { passive: true })
    }
    if (item.noRelease) {
        proxy.$confirm($t('message.confirm.releasedYet'), $t('message.prompt'), {
            confirmButtonText: $t('message.buttons.submit'),
            showCancelButton: false,
            type: 'warning'
        }).then(() => {
        }).catch(() => {
        })
        return
    }
    if (currentTool.value != item.value) {
        if (step.value > 1 || localhostSuccessFile.value.length > 0) {
            proxy.$confirm(`${$t('message.confirm.loseTheCurrent')}${currentTool.value.value == 'merge' ? $t('message.confirm.selectFiles') : currentTool.value.value == 'document' ? $t('message.confirm.convertFiles') : $t('message.confirm.recognitionContent')}${$t('message.confirm.isContinue')}`, $t('message.prompt'), {
                confirmButtonText: $t('message.buttons.submit'),
                cancelButtonText: $t('message.buttons.cancal'),
                type: 'warning',
            }).then(() => {
                if (item.value == 'ocr') {
                    typeChecked.value = 'image'
                    checkFileType.value = TypeList[0].checkType
                } else {
                    typeChecked.value = 'word'
                    checkFileType.value = TypeList[2].checkType
                }
                currentTool.value = item
                if (item.value == 'document') {
                    checkFileType.value = item.checkType
                }
                handleCancal()
            });
        } else {
            if (item.value == 'ocr') {
                typeChecked.value = 'image'
                checkFileType.value = TypeList[0].checkType

            } else {
                typeChecked.value = 'word'
                checkFileType.value = TypeList[2].checkType
            }
            if (item.value == 'document') {
                checkFileType.value = item.checkType
            }
            currentTool.value = item
            handleCancal()
        }
    }
}
async function initImage() {
    let { width, height } = await getImgSize(uploadFile.value.fileLink);
    const mousewheelevt = /Firefox/i.test(navigator.userAgent) ? "DOMMouseScroll" : "mousewheel";
    ocrImgBoxRef.value.addEventListener(mousewheelevt, handleWheel, { passive: true })
    // 设置原始图片的大小
    let realWidth = width;
    let realHeight = height;

    // 获取高宽比例
    const whRatio = realWidth / realHeight;
    const hwRatio = realHeight / realWidth;

    //获取盒子的大小
    const boxW = ocrImgBoxRef.value.clientWidth;
    const boxH = ocrImgBoxRef.value.clientHeight;
    if (realWidth >= realHeight) {
        imgH.value = hwRatio * boxW;
        const nih = imgH.value;
        if (nih > boxH) {
            imgH.value = boxH;
            imgW.value = whRatio * boxH;
        } else {
            imgW.value = boxW;
        }
        imgPos.value.top = (boxH - imgH.value) / 2;
        imgPos.value.left = (boxW - imgW.value) / 2;
    } else {
        imgW.value = (boxH / realHeight) * realWidth;
        imgH.value = boxH;
        imgPos.value.left = (boxW - imgW.value) / 2;
    }
}
function handleWheel(e) {
    const ev = e || window.event; // 兼容性处理 => 火狐浏览器判断滚轮的方向是属性 detail，谷歌和ie浏览器判断滚轮滚动的方向是属性 wheelDelta
    // dir = -dir; // dir > 0 => 表示的滚轮是向上滚动，否则是向下滚动 => 范围 (-120 ~ 120)
    const dir = ev.detail ? ev.detail * -120 : ev.wheelDelta;
    imgSize.value += dir / 2000
    if (imgSize.value < -0.5) imgSize.value = -0.5
    if (imgSize.value > 1) imgSize.value = 1
    imgScale.value = 1 + imgSize.value
}
function getImgSize(url: string) {
    return new Promise((resolve, reject) => {
        let imgObj = new Image();
        imgObj.src = url;
        imgObj.onload = () => {
            resolve({
                width: imgObj.width,
                height: imgObj.height,
            });
        };
    });
}
function onMousedLeave(e) {
    ocrImgBoxRef.value.onmousemove = null;
    ocrImgBoxRef.value.onmouseup = null;
}
function onmousedownHandle(e) {
    ocrImgBoxRef.value.onmousemove = function (el) {
        const ev = el || window.event; // 阻止默认事件
        ev.preventDefault();
        imgPos.value.left += ev.movementX
        imgPos.value.top += ev.movementY
    }
    ocrImgBoxRef.value.onmouseup = function (el) {
        ocrImgBoxRef.value.onmousemove = null;
        ocrImgBoxRef.value.onmouseup = null;
    }
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        return false;
    }
}
function handleExceed() {
    proxy.$notify({
        title: $t('message.prompt'),
        message: $t('message.message.mergeMaximum5'),
        type: 'warning',
        position: 'bottom-right'
    });
}
function uploadError() {
    uploadLoading.value = false
    step.value = 1
}
function beforeUpload(file, type) {
    let acceptFileType = ['docx', 'pdf', 'doc', 'xlsx', 'xls', 'txt', 'xml', 'csv', 'ppt', 'pptx', 'pptm', 'fods', 'ods', 'ots', 'xlsb', 'xlsm', 'xlt', 'xltm', 'xltx', 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx',
        'djvu', 'docm', 'docxf', 'dot', 'dotm', 'dotx', 'epub', 'fb2', 'fodt', 'html', 'mht', 'pdt', 'ott', 'oxps', 'rtf', 'xps']
    let ocrFileType = ['pdf', 'png', 'jpeg', 'gif', 'jpg']
    let mergePDFType = ['pdf']
    let mergeWordType = ['docx']
    let fileType = file.name.split(".").slice(-1)[0].toLowerCase()
    if (!(currentTool.value.value == 'document' ? acceptFileType : currentTool.value.value == 'merge' ? typeChecked.value == 'pdf' ? mergePDFType : mergeWordType : ocrFileType).includes(fileType)) {
        proxy.$notify({
            title: $t('message.kindReminder'),
            message: currentTool.value.value == 'document' ? $t('message.message.otherFormatConversion') : currentTool.value.value == 'merge' ? $t('message.message.otherFormatMerge') : $t('message.message.otherFormatRecognition'),
            type: 'warning',
            position: 'bottom-right'
        });
        return false
    }
    if (file.size / 1024 / 1024 > 20) {
        proxy.$notify({
            title: $t('message.kindReminder'),
            message: $t('message.message.fileSizeMax20'),
            type: 'warning',
            position: 'bottom-right'
        });
        return false
    }
    if (!type) {
        step.value = 1.5
        uploadLoading.value = true
        if (!animation.value) {
            startAnimation()
        }
    }
    return true
}
function onProgress(event, file, fileList) {
    localhostFileList.value = fileList
}
function uploadSuccess(res, file, fileList) {
    uploadLoading.value = false
    successFileNum.value += 1
    if (res.code == 0) {
        uploadFile.value = res.data
        if (currentTool.value.value == 'document') {
            step.value = 2
            documentType.value = getSwtichDropList(uploadFile.value.originalFileName)[0].toUpperCase()
        } else if (currentTool.value.value == 'ocr') {
            ocrReiden(1)
        } else if (currentTool.value.value == 'merge') {
            if (successFileNum.value >= localhostFileList.value.length) {
                step.value = 2
                localhostSuccessFile.value = []
                localhostFileList.value.forEach(item => {
                    if (item.status == 'success') {
                        localhostSuccessFile.value.push(item)
                    }
                })
                nextTick(() => {
                    if (animation.value) {
                        animation.value.destroy()
                        animation.value = null
                    }
                    successFileNum.value = 0
                    localhostFileList.value = []
                })
            }
        }
    }
}
function getSwtichDropList(val) {
    let type = val.split(".").slice(-1)[0].toLowerCase()
    let arr = [],
        docType = ['bmp', 'docm', 'docx', 'docxf', 'dotm', 'dotx', 'epub', 'fb2', 'gif', 'html', 'jpg', 'odt', 'ott', 'pdf', 'pdfa', 'png', 'rtf', 'txt'],
        xlsxType = ['bmp', 'csv', 'gif', 'jpg', 'ods', 'ots', 'pdf', 'pdfa', 'png', 'xlsm', 'xlsx', 'xltm', 'xltx'],
        fileType = ['bmp', 'gif', 'jpg', 'odp', 'otp', 'pdf', 'pdfa', 'png', 'potm', 'potx', 'pptm', 'pptx']
    switch (type) {
        case 'djvu':
            arr = ['bmpt', 'gif', 'jpg', 'png']
            break;
        case 'docx':
        case 'docxf':
        case 'pdf':
        case 'docm':
        case 'dotm':
        case 'dotx':
        case 'epub':
        case 'fb2':
        case 'html':
        case 'mht':
        case 'odt':
        case 'ott':
        case 'rtf':
        case 'txt':
            arr = docType
            arr.splice(arr.indexOf(type), 1)
            break
        case 'xps':
        case 'xml':
        case 'fodt':
        case 'opxs':
        case 'dot':
        case 'doc':
            arr = docType
            break;
        case 'csv':
        case 'ods':
        case 'ots':
        case 'xlsm':
        case 'xlsx':
        case 'xltm':
        case 'xltx':
            arr = xlsxType
            arr.splice(arr.indexOf(type), 1)
            break;
        case 'fods':
        case 'xls':
        case 'xlsb':
        case 'xlt':
            arr = xlsxType
            break
        case 'odp':
        case 'otp':
        case 'potm':
        case 'potx':
        case 'pptm':
        case 'pptx':
            arr = fileType
            arr.splice(arr.indexOf(type), 1)
            break
        case 'fodp':
        case 'pot':
        case 'pps':
        case 'ppsm':
        case 'ppsx':
        case 'ppt':
            arr = fileType
            break
        default:
            break;
    }
    return arr
}
function ocrReiden(val) {
    let fileType = uploadFile.value.originalFileName.split(".").slice(-1)[0].toLowerCase()
    if (val) {
        step.value = 2.5
    }
    ocrRecognition({
        fileUrl: uploadFile.value.fileLink,
        isGetText: false,
        suffix: fileType
    }).then(res => {
        if (res.data.code == 0) {
            step.value = 3
            let rowArr = JSON.parse(res.data.data)
            ocrText.value = ''
            ocrRaw.value = ''
            let nextLineHeight = 0 // 下一行的高度
            for (let i = 0; i < rowArr.length; i++) {
                ocrRaw.value += JSON.stringify(rowArr[i]) + '\r'
                // 合并同一行的数据
                if (i < rowArr.length - 1) {
                    nextLineHeight = rowArr[i + 1][0][1]
                    // 判断同一行的依据是 两段的行高差 小于 行高的一半
                    if (
                        Math.abs(rowArr[i][0][1] - nextLineHeight) <
                        rowArr[i][0][3] / 2
                    ) {
                        ocrText.value += rowArr[i][1] + ' '
                    } else {
                        ocrText.value += rowArr[i][1] + '\r'
                    }
                } else {
                    ocrText.value += rowArr[i][1]
                }
                ocrTextArr.value = ocrText.value.split('\r').filter(item => { return item })
                ocrTextArrCopy.value = JSON.parse(JSON.stringify(ocrTextArr.value))
            }
        } else {
            if (val) {
                step.value = 1
                handleCancal()
            }
        }
    }).catch(err => {
        if (val) {
            step.value = 1
            handleCancal()
        }
    })
}
function getCurrentIcon() {
    let type = uploadFile.value.originalFileName.split(".").slice(-1)[0].toLowerCase()
    return type
}
function handleCancal() {
    if (animation.value) {
        animation.value.destroy()
        animation.value = null
    }
    successFileNum.value = 0
    uploadFile.value = {
        name: '',
        fileLink: '',
        originalFileName: ''
    }
    imgScale.value = 1
    imgW.value = 0
    imgH.value = 0
    imgPos.value = {
        left: 0,
        top: 0,
    }
    imgSize.value = 0
    ocrType.value = 'result'
    localhostFileList.value = []
    localhostSuccessFile.value = []
    transEndFile.value = {}
    step.value = 1
    ocrText.value = ''
    ocrTextArr.value = []
    ocrTextArrCopy.value = []
}
function startSwitch() {
    let fileType = uploadFile.value.originalFileName.split(".").slice(-1)[0].toLowerCase()
    step.value = 2.5
    nextTick(() => {
        if (animation.value) {
            animation.value.destroy()
            animation.value = null
        }
        if (!animation.value) {
            startAnimation()
        }
        fileTransition({
            fileUrl: uploadFile.value.fileLink,
            outSuffix: documentType.value.toLowerCase(),
            suffix: fileType
        }).then(res => {
            if (res.data.code == 0) {
                toolState.value = true
                transEndFile.value = {
                    fileName: uploadFile.value.originalFileName.split('.')[0],
                    fileUrl: res.data.data,
                    suffix: documentType.value.toLowerCase(),
                    isSave: false
                }
                step.value = 3
            } else {
                toolState.value = false
                step.value = 2
            }
        }).catch(err => {
            toolState.value = false
            step.value = 2
        }).finally(res => { })
    })
}
function startAnimation() {
    nextTick(() => {
        if (!animation.value) {
            animation.value = lottie.loadAnimation({
                // container: loadingRef.value, // the dom element that will contain the animation
                container: document.getElementById("loaidng-animiate"),
                renderer: "svg",
                loop: true,
                autoplay: true,
                animationData: loading5Data,
                rendererSettings: {
                    context: $t('message.text.imageInProgress'), // the canvas context
                    scaleMode: 'noScale',
                    clearCanvas: false,
                    progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
                    hideOnTransparent: true
                },
            })
        }
    })
}
function saveFile() {
    selectKnowType.value = 'folder'
    selectTitle.value = $t('message.text.saveLocation')
    nextTick(() => {
        saveKnowRef.value.init()
    })
}
function openCloudFile() {
    selectKnowType.value = 'file'
    selectTitle.value = $t('message.text.checkDocument')
    nextTick(() => {
        saveKnowRef.value.init()
    })
}
function delFile(index) {
    localhostSuccessFile.value.splice(index, 1)
}
function changeMergeType() {
    if (mergeFileType.value == 'local') {
        mergeFileType.value = 'cloud'
    } else {
        mergeFileType.value = 'local'
    }
}
function uploadColudeFile() {
    if (mergeFileType.value == 'cloud') {
        selectKnowType.value = 'file'
        selectTitle.value = $t('message.text.checkDocument')
        nextTick(() => {
            saveKnowRef.value.init()
        })
    }
}
function handleSuccessExceed() {
    proxy.$notify({
        title: $t('message.prompt'),
        message: `${$t('message.message.maxins5File')}${localhostSuccessFile.value.length}${$t('message.message.maxins5File1')}${5 - localhostSuccessFile.value.length}${$t('message.message.maxins5File2')}`,
        type: 'warning',
        position: 'bottom-right'
    });
}
function uploadSuccessFile(res, file, fileList) {
    successFileNum.value += 1
    if (res.code == 0) {
        if (successFileNum.value >= localhostFileList.value.length) {
            step.value = 2
            localhostFileList.value.forEach(item => {
                if (item.status == 'success') {
                    localhostSuccessFile.value.push(item)
                }
            })
            nextTick(() => {
                successFileNum.value = 0
                localhostFileList.value = []
            })
        }
    }
}
// 开始合并
function startMerge() {
    if (localhostSuccessFile.value.length < 2) {
        proxy.$notify({
            title: $t('message.prompt'),
            type: 'warning',
            message: $t('message.message.mixins2File'),
            position: 'bottom-right',
        });
        return
    }
    let obj = [], sizeZeroNum = 0, sizeZeroName = []
    localhostSuccessFile.value.forEach((item, index) => {
        if (item.size == 0) {
            sizeZeroNum += 1
            sizeZeroName.push(item.name)
        }
        obj.push(item.response.data)
    })
    if (sizeZeroNum) {
        proxy.$notify({
            title: $t('message.prompt'),
            type: 'warning',
            dangerouslyUseHTMLString: true,
            message: `<div>${$t('message.message.nullFile')}</br><strong>${sizeZeroName.join(',')}</strong></div>`,
            position: 'bottom-right',
            duration: 5000
        });
        return
    }
    step.value = 2.5
    startAnimation()
    filesMer(obj).then(res => {
        if (res.data.code == 0) {
            toolState.value = true
            step.value = 3
            transEndFile.value.fileUrl = res.data.data
            transEndFile.value.fileName = `合成文档`
            transEndFile.value.suffix = typeChecked.value == 'word' ? 'docx' : 'pdf'
        } else {
            toolState.value = false
            step.value = 1
            handleCancal()
            proxy.$notify({
                title: $t('message.prompt'),
                message: $t('message.message.filaMergeFiel'),
                type: 'warning',
                position: 'bottom-right'
            });
        }
    }).catch((err) => {
        step.value = 1
        toolState.value = false
        handleCancal()
        proxy.$notify({
            title: $t('message.prompt'),
            message: $t('message.message.filaMergeFiel'),
            type: 'warning',
            position: 'bottom-right'
        });
    })
}
// 选好目录后回调
function getCheckedFile(item) {
    if (selectKnowType.value == 'file') {
        if (currentTool.value.value != 'merge') {
            let originalFileName = uploadFile.value.originalFileName
            getFileNameUrl({
                bucketName: item.bucketName,
                fileName: item.filePath
            }).then(res => {
                if (res.data.code == 0) {
                    if (item.name.indexOf(`.${item.nameSuffix}`) != -1) {
                        originalFileName = item.name
                    } else {
                        originalFileName = item.name + `.${item.nameSuffix}`
                    }
                    uploadFile.value = {
                        name: originalFileName,
                        fileLink: res.data.data,
                        originalFileName: originalFileName,
                    }

                    if (animation.value) {
                        animation.value.destroy()
                        animation.value = null
                    }
                    nextTick(() => {
                        if (!animation.value) {
                            startAnimation()
                        }
                    })
                    if (currentTool.value.value == 'document') {
                        step.value = 2
                        documentType.value = getSwtichDropList(uploadFile.value.originalFileName)[0].toUpperCase()
                    } else {
                        ocrReiden(1)
                    }
                }
            })
        } else {
            // item.forEach((f,fi)=>{

            // })
            localhostSuccessFile.value.push({
                name: item.name,
                size: item.size || 0,
                response: {
                    data: {
                        bucketName: item.bucketName,
                        fileLink: null,
                        fileName: item.filePath,
                        originalFileName: item.name
                    }
                }
            })
            step.value = 2
        }
    } else {
        if (currentTool.value.value == 'document' || currentTool.value.value == 'merge') {
            const formData = new FormData()
            formData.append('fileUrl', transEndFile.value.fileUrl)
            formData.append('fileName', transEndFile.value.fileName)
            formData.append('suffix', transEndFile.value.suffix)
            fileTransSave(item.id, formData).then(res => {
                if (res.data.code == 0) {
                    transEndFile.value.isSave = true
                    proxy.$notify({
                        title: $t('message.prompt'),
                        message: $t('message.message.fileSaveSuccess'),
                        type: 'success',
                        position: 'bottom-right'
                    });
                }
            })
        } else {
            const formData = new FormData()
            formData.append('content', ocrTextArr.value.join('\r'))
            formData.append('fileName', uploadFile.value.originalFileName)
            ocrSaveContent(item.id, formData).then(res => {
                if (res.data.code == 0) {
                    proxy.$notify({
                        title: $t('message.prompt'),
                        message: $t('message.message.fileSaveSuccess'),
                        type: 'success',
                        position: 'bottom-right'
                    });
                }
            })
        }
    }
}
function downLoadFile() {
    const a = document.createElement('a')
    a.href = transEndFile.value.fileUrl
    if (transEndFile.value.fileName.indexOf('.') != -1) {
        a.download = transEndFile.value.fileName
    } else {
        a.download = transEndFile.value.fileName + '.' + transEndFile.value.suffix
    }
    a.click()
}
function leftResize(e: MouseEvent) {
    // 处理拖动的时候不能选择文字
    document.onselectstart = function () {
        return false
    }
    const startX = e.clientX;
    const startWidth = ocrLeftWidth.value;
    const mouseMove = (documentE: MouseEvent) => {
        ocrLeftWidth.value = startWidth + (documentE.clientX - startX) * -1;
        if (ocrLeftWidth.value < 436) {
            ocrLeftWidth.value = 436
        } else if (ocrLeftWidth.value > document.getElementsByClassName('ocr-cotent-box')[0].scrollWidth - 436) {
            ocrLeftWidth.value = document.getElementsByClassName('ocr-cotent-box')[0].scrollWidth - 436
        }
    };
    const mouseUp = () => {
        document.removeEventListener('mousemove', mouseMove);
        document.removeEventListener('mouseup', mouseUp);
        // 拖拽完记得重新设置可以选中
        document.onselectstart = function () {
            return true;
        };
    };
    document.addEventListener('mousemove', mouseMove);
    document.addEventListener('mouseup', mouseUp);
}
function changeOcrType(val) {
    if (ocrType.value != val) {
        if (ocrIsedit.value) {
            proxy.$confirm($t('message.confirm.loseModifContent'), $t('message.prompt'), {
                confirmButtonText: $t('message.buttons.submit'),
                type: 'warning'
            }).then(() => {
                ocrTextArrCopy.value = JSON.parse(JSON.stringify(ocrTextArr.value))
                ocrIsedit.value = false
                ocrType.value = val
                setJsonVal()
            }).catch(() => {
                ocrIsedit.value = false
                ocrType.value = val
                setJsonVal()
                ocrTextArr.value = JSON.parse(JSON.stringify(ocrTextArrCopy.value))
            })
        } else {
            ocrType.value = val
            setJsonVal()
        }
    }
}
function setJsonVal() {
    if (ocrType.value == 'json') {
        nextTick(() => {
            monaco.editor.create(monacoEditor.value, {
                value: ocrRaw.value, // 编辑器初始显示文字
                theme: 'CodeSampleTheme', // 官方自带三种主题vs, hc-black, or vs-dark
                language: 'html', // 语言支持自行查阅demo
                overviewRulerBorder: false, // 滚动是否有边框
                disableLayerHinting: true,
                automaticLayout: true, // 自动布局
                wordWrap: 'on', //是否自动换行
                readOnly: true, // 是否只读
                minimap: { // 关闭代码缩略图
                    enabled: false // 是否启用预览图
                },
                folding: false, // 是否启用代码折叠
                lineNumbers: 'off', // 控制行号的显隐
                scrollBeyondLastLine: false, // 禁用额外滚动区
                scrollbar: {
                    verticalScrollbarSize: 4, // 垂直滚动条宽度，默认px
                    horizontalScrollbarSize: 4 // 水平滚动条高度
                },
                contextmenu: false // 禁用右键菜单
            })
        })
    }
    // editor.value = 
}
function doAction(type) {
    switch (type) {
        case 'download':
            let type = uploadFile.value.originalFileName.split(".").slice(-1)[0].toLowerCase()
            const blob = new Blob([ocrText.value], {
                type: 'text/plain;charset=utf-8'
            })
            const ObjectUrl = URL.createObjectURL(blob)
            const aTag = document.createElement('a')
            aTag.href = ObjectUrl
            aTag.download = uploadFile.value.originalFileName.replace(type, 'txt')
            aTag.click()
            URL.revokeObjectURL(ObjectUrl)
            break;
        case 'copy':
            copyText(ocrText.value, () => {
                proxy.$notify({
                    title: $t('message.message.copySuccess'),
                    type: 'success',
                    position: 'bottom-right'
                });
            })
            break;
        case 'edit':
            ocrType.value = 'result'
            ocrIsedit.value = true
            break;
        case 'refresh':
            ocrReiden(1)
            break
        case 'cancalEdit':
            ocrIsedit.value = false
            break;
        case 'saveEdit':
            ocrTextArrCopy.value = JSON.parse(JSON.stringify(ocrTextArr.value))
            ocrIsedit.value = false
            break;
        case 'save':
            selectKnowType.value = 'folder'
            selectTitle.value = $t('message.text.saveLocation')
            nextTick(() => {
                saveKnowRef.value.init()
            })
            break
        default:
            break;
    }
}
</script>
<style lang="scss" scoped>
.tool-page {
    padding: 16px 24px;
    height: 100%;
    box-sizing: border-box;

    // display: grid;
    // display: inline-block;
    .tool-top-box {
        display: grid;
        grid-template-columns: repeat(4, minmax(310px, 1fr));
        grid-column-gap: 16px;

        .tool-item-box {
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0px 24px;
            height: 120px;
            cursor: pointer;
            border-radius: 6px;
            overflow: hidden;
            box-sizing: border-box;

            .tool-info {
                .tool-name {
                    @include SourceHanSansCN-Bold;
                    font-size: 16px;
                    color: #363B4C;
                }

                .tool-desc {
                    @include SourceHanSansCN-Regular;
                    font-size: 14px;
                    color: #6F7588;
                }
            }

            .tool-img {
                width: 72px;
                height: 72px;
                margin-left: 8px;
            }
        }

        .active {
            box-shadow: 0px 2px 8px 0px rgba(54, 59, 76, 0.15);
            border: 1px solid #1E6FFF;
        }
    }

    .check-tool-title {
        @include SourceHanSansCN-Bold;
        font-size: 16px;
        color: #363B4C;
        margin: 16px 0px 16px;
    }

    .type-box {
        display: flex;
        align-items: center;

        .type-item {
            height: 32px;
            margin-bottom: 16px;
            color: #6F7588;
            font-size: 16px;
            cursor: pointer;
            position: relative;
        }

        .active {
            color: #1E6FFF;
            @include SourceHanSansCN-Bold;

            &::after {
                content: '';
                position: absolute;
                width: 100%;
                left: 0px;
                bottom: 0px;
                height: 2px;
                background: #1E6FFF;
                border-radius: 2px 0px 2px 0px;
            }
        }

        .type-item+.type-item {
            margin-left: 32px;
        }
    }

    .tool-upload-file-boxs {
        width: 100%;
        height: 380px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        border-radius: 6px 6px 6px 6px;
        border: 2px dashed #D7D8DB;
        user-select: none;
        overflow: hidden;

        ::v-deep(.el-upload-dragger) {
            border: none !important
        }

        .drag-upload-box {
            width: 100%;
        }

        .upload-content-box {
            img {
                width: 300px;
                height: 200px;
                object-fit: scale-down;
            }

            .tips {
                color: #363B4C;
                font-size: 14px;
                line-height: 18px;
                @include SourceHanSansCN-Bold;
                margin-bottom: 24px;
            }

            .buttons {
                display: flex;
                align-items: center;
                justify-content: center;

                .button {
                    height: 40px;
                    width: 160px;
                    font-size: 14px;
                    border-radius: 4px;
                }

                .know-button {
                    margin-left: 16px;
                    line-height: 40px;

                    background: #E4EDFF;
                    color: #1e6fff;
                }
            }
        }

        .first-title {
            @include SourceHanSansCN-Bold;
            font-size: 16px;
            color: #363B4C;
            margin-bottom: 16px;
        }

        .second-title {
            @include SourceHanSansCN-Regular;
            font-size: 14px;
            color: #6F7588;
        }

        .uploadFile-actions {
            display: flex;
            margin-top: 48px;
            align-items: center;

            .file-name-box {
                display: flex;
                align-items: center;
                width: 440px;
                height: 48px;
                line-height: 48px;
                background: #F5F6F7;
                border-radius: 4px 4px 4px 4px;
                padding: 0px 16px;
                margin-right: 32px;

                .doc-name {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .file-icon {
                    min-width: 20px;
                    width: 20px;
                    height: 20px;
                    margin-right: 8px;
                }
            }

            .out-name {
                font-size: 14px;
                color: #363b4c;
                @include SourceHanSansCN-Regular;
            }

            .out-type-box {
                margin-left: 4px;
                margin-right: 32px;

                .select {
                    ::v-deep(.el-input) {
                        height: 48px;
                        width: 152px;

                        .el-input__wrapper {
                            box-shadow: none !important;
                            background: #F5F6F7 !important;
                        }
                    }
                }
            }

            .button {
                font-size: 14px;
                width: 144px;
                height: 48px;
            }
        }

        .upload-file-box {
            margin-top: 40px;
            display: flex;
            align-items: center;

            .draggable-box {
                display: flex;
                align-items: center;

                .draggable-item {
                    position: relative;
                    margin-left: 0px;
                    width: 112px;
                    height: 112px;
                    border-radius: 6px;
                    background-color: #F5F6F7;
                    border: 1px solid #F5F6F7;
                    padding: 9px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    box-sizing: border-box;

                    .file-index {
                        position: absolute;
                        right: 0px;
                        top: 0px;
                        width: 24px;
                        height: 24px;
                        background: #E4EDFF;
                        border-radius: 0px 6px 0px 6px;
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #1E6FFF;

                        span {
                            display: block;
                        }

                        i {
                            display: none;
                            font-size: 14px;
                            color: #1E6FFF;
                        }
                    }

                    .file-name-box {
                        margin-top: 4px;

                        .file-name {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 93px;
                            white-space: nowrap;
                            font-size: 14px;
                        }
                    }

                    .draggable-item-icon {
                        width: 32px;
                        height: 32px;
                    }

                    &:hover {
                        border-color: #1E6FFF;

                        .file-index {
                            span {
                                display: none;
                            }

                            i {
                                display: block;
                            }
                        }
                    }
                }

                .draggable-item+.draggable-item {
                    margin-left: 26px;
                }
            }

            .draggable-item {
                margin-left: 26px;
                width: 112px;
                height: 112px;
                border-radius: 6px;
                background-color: #F5F6F7;
                border: 1px solid #F5F6F7;
                padding: 9px;
                box-sizing: border-box;
                cursor: pointer;
                position: relative;

                .drag-upload-box {
                    position: absolute;
                    left: 0px;
                    height: 100%;
                    top: 0px;
                    z-index: 1;

                    ::v-deep(.el-upload) {
                        width: 100%;
                        height: 100%;

                        .add-button {
                            width: 100%;
                            height: 100%;
                            padding-bottom: 22px;
                            box-sizing: border-box;
                            margin: 0px;
                        }
                    }
                }

                .change-file-box {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    z-index: 1;
                    width: 24px;
                    height: 24px;
                    background: #EEEFF0;
                    border-radius: 0px 6px 0px 6px;
                    font-size: 14px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .change-file-icon {
                        width: 14px;
                        height: 14px;
                    }
                }

                .add-button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 20px;
                    margin-bottom: 10px;
                    height: 30px;
                    width: 100%;

                    i {
                        font-size: 30px;
                        color: #c2c5cf;
                    }
                }

                .add-file-text {
                    font-size: 14px;
                    color: #6F7588;
                }
            }
        }

        .merge-actions {
            margin-top: 32px;

            .button {
                font-size: 14px;
                width: 144px;
                height: 48px;
            }
        }

        .loaidng-animiate {
            width: 300px;
            height: 200px;
        }

        .loading-text {
            font-size: 16px;
            @include SourceHanSansCN-Bold;
            color: #363B4C;
        }

        .trans-file-status-box {
            display: flex;
            flex-direction: column;
            align-items: center;

            .trans-status {
                width: 56px;
                height: 56px;
            }

            .status-text {
                font-size: 16px;
                color: #363B4C;
                @include SourceHanSansCN-Bold;
            }

            .status-tips {
                margin-top: 16px;
                font-size: 14px;
                color: #6F7588;
                margin-bottom: 40px;
            }

            .trans-name-box {
                display: flex;
                align-items: center;
                width: 440px;
                height: 48px;
                line-height: 48px;
                background: #F5F6F7;
                border-radius: 4px 4px 4px 4px;
                padding: 0px 16px;
                box-sizing: border-box;

                .doc-name {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .file-icon {
                    min-width: 20px;
                    width: 20px;
                    height: 20px;
                    margin-right: 8px;
                }
            }

            .trans-actions-box {
                display: flex;
                align-items: center;
                padding: 0px 4px;
                margin-top: 24px;
                box-sizing: border-box;

                .button {
                    width: 128px;
                    height: 48px;
                    font-size: 14px;
                }

                .other-button {
                    background: #E4EDFF;
                    border-radius: 4px 4px 4px 4px;
                    color: #1E6FFF;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .button+.button {
                    margin-left: 24px;
                }
            }
        }

        .ocr-cotent-box {
            display: flex;
            align-items: center;
            height: 100%;
            width: 100%;

            .ocr-left {
                height: 100%;
                padding: 24px;
                box-sizing: border-box;
                overflow: hidden;
                position: relative;

                img {
                    position: absolute;
                }
            }

            .ocr-drag-line {
                height: 100%;
                width: 1px;
                background-color: #eeeff0;
                position: relative;

                .ocr-drag-button {
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    left: 0px;
                    transform: translateX(calc(-50% + 2px));
                    top: 50%;
                    cursor: col-resize;
                    z-index: 2;
                }
            }

            .ocr-right {
                height: 100%;

                .ocr-type-top {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);

                    .type-item {
                        height: 36px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #F5F6F7;
                        font-size: 14px;
                        color: #363B4C;
                        @include SourceHanSansCN-Regular;
                        cursor: pointer;
                    }

                    .item-active {
                        background: #1E6FFF;
                        color: #FFFFFF;
                    }
                }

                .ocr-content-box {
                    height: calc(100% - 84px);

                    #monacoEditor {
                        height: 100%;
                    }

                    .result-box {
                        padding-top: 10px;
                        padding-bottom: 10px;

                        .result-item {
                            min-height: 36px;
                            padding: 0px 24px;
                            box-sizing: border-box;
                            display: flex;
                            // align-items: center;
                            align-items: start;

                            .result-index {
                                width: 20px;
                                min-width: 20px;
                                height: 20px;
                                background: #1E6FFF;
                                border-radius: 4px 4px 4px 4px;
                                font-size: 12px;
                                line-height: 20px;
                                text-align: center;
                                color: #FFFFFF;
                                margin: 10px 0px 0px 0px;
                            }

                            .result-value {
                                min-height: 36px;
                                margin-left: 8px;
                                background: #F5F6F7;
                                border-radius: 4px 4px 4px 4px;
                                // line-height: 36px;
                                width: 100%;

                                .no-div {
                                    font-size: 14px;
                                    @include SourceHanSansCN-Regular;
                                    padding: 8px 11px;
                                    box-sizing: border-box;
                                }

                                ::v-deep(.el-input__wrapper) {
                                    box-shadow: none !important;
                                    resize: none !important;
                                    background-color: transparent !important;

                                    .el-input__inner {
                                        height: 36px !important;
                                        ;
                                    }
                                }
                            }
                        }

                        .result-item+.result-item {
                            margin-top: 10px;
                        }
                    }
                }

                .ocr-type-bottom {
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    padding: 0px 24px;
                    box-sizing: border-box;
                    border-top: 1px solid #eeeff0;

                    ::v-deep(span) {
                        display: flex;
                        align-items: center;
                        margin-right: 24px;
                    }

                    .action-icon {
                        width: 16px;
                        height: 16px;
                        cursor: pointer;
                        color: #363B4C;
                    }

                    // .action-icon+.action-icon{
                    //     margin-left: 24px;
                    // }
                    .keowledge-danchuangguanbi1 {
                        font-size: 14px;
                        cursor: pointer;
                        color: #363B4C;
                        // margin-left: 24px;
                    }
                }
            }
        }
    }

    .ocr-finish-box {
        height: calc(100vh - 480px);
    }

    .file-upload-tips {
        margin-top: 16px;

        .title {
            font-size: 14px;
            @include SourceHanSansCN-Bold;
            color: #363B4C;
        }

        .file-tips-item {
            display: flex;
            color: #363B4C;
            align-items: center;
            font-size: 14px;
            padding-left: 16px;
            margin-top: 16px;
            position: relative;

            &::before {
                position: absolute;
                content: '';
                left: 4px;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: #6f7588;
                top: calc(50% - 2px);
            }

            .icon {
                width: 20px;
                height: 20px;
                margin-right: 8px;
            }

            .text {
                ::v-deep(span) {
                    color: #1E6FFF !important;
                }
            }
        }
    }
}
</style>
<style lang="scss">
@media screen and (max-width:1560px) {
    .tool-page {
        display: inline-table;
    }
}
</style>
